<template>
  <div
    :class="{
      search_wrap: true,
      is_focus: isSearchInputFocus,
    }"
    @click="searchBoxClick"
  >
    <!-- 搜索引擎图标 -->
    <div class="se_icon_box" @click="isShowSelectSEModal = true">
      <SEIcon width="20" height="20" :name="currentSEData.name"></SEIcon>
    </div>
    <!-- 搜索框 -->
    <a-input
      size="large"
      ref="searchInputRef"
      v-model:value="keyWord"
      :bordered="false"
      placeholder="请输入关键字"
      class="search_content_input"
      allow-clear
      @keydown.enter="searchEnter"
      @focus="searchInputFocus"
      @blur="searchInputBlur"
    />

    <!-- 选择搜索引擎的弹窗 -->
    <a-modal
      v-model:open="isShowSelectSEModal"
      class="select_se_modal"
      :footer="null"
      :closable="false"
      width="570px"
    >
      <div class="se_list_box">
        <div
          class="se_item_box"
          v-for="(se, indexSE) in seList"
          :key="indexSE"
          @click="seItemClick(se)"
        >
          <div class="se_item_icon_box">
            <SEIcon width="34" height="34" :name="se.name"></SEIcon>
          </div>
          <span class="se_name_text">{{ se.title }}</span>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import "./index.scss";
export default defineComponent({
  name: "Search",
});
</script>
<script setup>
import BaiduIcon from "./iconC/baiduIcon.vue";
import BingIcon from "./iconC/bingIcon.vue";
import SougouIcon from "./iconC/sougouIcon.vue";
import GoogleIcon from "./iconC/googleIcon.vue";
import SEIcon from "./iconC/seIcon.vue";
import {
  getSEList,
  findSEDataByName,
  getLastUseSEData,
  setCurrentUseSE,
} from "@/utils/se";

import {} from "@/api/SE";

// 显示选择搜索引擎弹窗的标识
const isShowSelectSEModal = ref(false);

// 搜索框Ref
const searchInputRef = ref(null);

// 搜索框是否聚焦标识
const isSearchInputFocus = ref(false);

// 关键字数据
const keyWord = ref("");

// 搜索引擎列表
const seList = ref([]);

// 候选词数据
const candidateWordList = ref([]);

// 当前的搜索引擎数据
const currentSEData = ref({});

// 浏览器引擎选项点击事件
const seItemClick = (se) => {
  currentSEData.value = se;
  setCurrentUseSE(se.name);
  isShowSelectSEModal.value = false;
};

// 搜索框外层盒子点击事件
const searchBoxClick = () => {
  console.log(searchInputRef.value);
  searchInputRef.value.focus();
};

// 搜索框按下回车事件
const searchEnter = () => {
  window.open(`${currentSEData.value.toLinkUrl}${keyWord.value}`);
  // window.close();
};

// 搜索框聚焦
const searchInputFocus = () => {
  isSearchInputFocus.value = true;
};

const searchInputBlur = () => {
  isSearchInputFocus.value = false;
};

// 关键字输入框input事件
const keyWordInput = () => {
  selectBaiduCandidateWordFunc();
};

// 查询百度搜索候选词的函数
const selectBaiduCandidateWordFunc = async () => {
  // await selectBaiduCandidateWordApi(keyWord.value).then((res) => {
  //   console.log("候选词", res);
  //   candidateWordList.value = res.data.g ? res.data.g : [];
  // });
  // await test1Api().then((res) => {
  //   console.log(res);
  // });
};

// init
onMounted(() => {
  // selectBaiduCandidateWordFunc();
  // 默认搜索引擎
  if (getLastUseSEData()) {
    currentSEData.value = getLastUseSEData();
  } else {
    let defaultSE = getSEList()[0];
    currentSEData.value = defaultSE;
    setCurrentUseSE(defaultSE.name);
  }
  console.log("当前引擎数据", currentSEData.value);

  seList.value = getSEList();
});
</script>

<style lang="scss" scoped></style>
